<template>
  <div class="home">
    <el-card class="welcome-card" :body-style="{ padding: '40px' }">
      <div class="welcome-content">
        <!-- 将logo放在欢迎文字旁边 -->
        <div class="welcome-header">
          <img src="@/assets/logo.svg" alt="文学鉴赏平台Logo" class="logo" />
          <h1>欢迎来到文学鉴赏平台</h1>
        </div>
        <p>在这里您可以欣赏各种文学作品，发表您的评论和见解。</p>
        <el-button type="primary" size="large" @click="goToWorks" round>
          立即探索
          <el-icon class="el-icon--right">
            <ArrowRight />
          </el-icon>
        </el-button>
      </div>
    </el-card>
    
    <div class="features">
      <el-card class="feature" shadow="hover" v-for="(feature, index) in features" :key="index" :body-style="{ padding: '30px' }">
        <div class="feature-content">
          <el-icon class="feature-icon" :size="40">
            <component :is="feature.icon" />
          </el-icon>
          <h2>{{ feature.title }}</h2>
          <p>{{ feature.description }}</p>
        </div>
      </el-card>
    </div>
    
    <div class="categories-section">
      <h2>作品分类</h2>
      <el-skeleton :loading="loading" animated>
        <template #template>
          <div class="categories-grid">
            <el-card v-for="n in 4" :key="n" class="category-card">
              <el-skeleton-item variant="h3" style="width: 70%" />
              <el-skeleton-item variant="text" style="width: 90%" />
            </el-card>
          </div>
        </template>
        <template #default>
          <div class="categories-grid">
            <el-card 
              v-for="category in categories" 
              :key="category.id" 
              class="category-card"
              shadow="hover"
              @click="goToWorks(category.id)"
            >
              <div class="category-content">
                <el-icon class="category-icon" :size="32">
                  <component :is="getCategoryIcon(category.name)" />
                </el-icon>
                <h3>{{ category.name }}</h3>
                <p class="category-description">{{ category.description }}</p>
              </div>
            </el-card>
          </div>
        </template>
      </el-skeleton>
    </div>
    
    <el-card class="cta-card" :body-style="{ padding: '40px' }">
      <div class="cta-content">
        <h2>开始您的文学之旅</h2>
        <p>立即浏览我们的作品库，发现您喜欢的书籍</p>
        <div class="cta-buttons">
          <el-button type="primary" size="large" @click="goToWorks" round>
            浏览作品
          </el-button>
          <el-button type="success" size="large" @click="goToAbout" round>
            了解更多
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { listCategories } from '@/api/categories'

const router = useRouter()
const categories = ref<any[]>([])
const loading = ref(true)

const goToWorks = (categoryId?: number) => {
  if (categoryId) {
    router.push(`/works?categoryParent=${categoryId}`)

  } else {
    router.push('/works')
  }
}

const goToAbout = () => {
  router.push('/about')
}

// 根据分类名称获取对应图标
const getCategoryIcon = (name: string) => {
  // 古诗文相关
  if (name.includes('古诗文') || name.includes('唐诗') || name.includes('宋词') || name.includes('元曲')) {
    return 'Document'
  }
  // 现代文学相关
  if (name.includes('现代')) {
    return 'Edit'
  }
  // 外国文学相关
  if (name.includes('外国')) {
    return 'Compass'
  }
  // 小说相关
  if (name.includes('小说')) {
    return 'Notebook'
  }
  // 诗歌相关
  if (name.includes('诗')) {
    return 'Brush'
  }
  // 散文相关
  if (name.includes('散文')) {
    return 'Files'
  }
  // 默认图标
  return 'Collection'
}

const features = [
  {
    icon: 'Reading',
    title: '📚 丰富作品',
    description: '收录了众多经典和现代文学作品'
  },
  {
    icon: 'Comment',
    title: '💬 交流讨论',
    description: '与其他文学爱好者分享您的观点'
  },
  {
    icon: 'Star',
    title: '⭐ 评分系统',
    description: '为喜欢的作品打分，帮助他人发现好书'
  }
]

onMounted(async () => {
  try {
    categories.value = await listCategories()
  } catch (error) {
    console.error('获取分类列表失败:', error)
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
/* 添加welcome-header样式 */
.welcome-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.logo {
  width: 80px;
  height: 80px;
}

.home {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-card {
  margin-bottom: 40px;
  background: linear-gradient(135deg, var(--feature-bg) 0%, var(--bg-color) 100%);
  border: 1px solid var(--border-color);
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.welcome-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}

.welcome-content {
  text-align: center;
}

.welcome-content h1 {
  margin-bottom: 20px;
  color: var(--text-color);
  font-size: 2.5em;
}

.welcome-content p {
  font-size: 1.2em;
  color: var(--text-color);
  margin-bottom: 30px;
}

.features {
  display: flex;
  justify-content: space-around;
  gap: 30px;
  margin-bottom: 40px;
}

.feature {
  flex: 1;
  border-radius: 15px;
  background-color: var(--feature-bg);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.feature:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.feature-content {
  text-align: center;
}

.feature-icon {
  margin-bottom: 20px;
  color: #409eff;
}

.feature h2 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--text-color);
}

.feature p {
  color: var(--text-color);
  font-size: 1em;
}

.cta-card {
  text-align: center;
  background: linear-gradient(135deg, var(--feature-bg) 0%, var(--bg-color) 100%);
  border: 1px solid var(--border-color);
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.cta-content h2 {
  color: var(--text-color);
  font-size: 2em;
  margin-bottom: 15px;
}

.cta-content p {
  color: var(--text-color);
  font-size: 1.1em;
  margin-bottom: 30px;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.categories-section {
  margin: 40px 0;
}

.categories-section h2 {
  text-align: center;
  margin-bottom: 20px;
  color: var(--text-color);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 25px;
}

.category-card {
  cursor: pointer;
  text-align: center;
  background-color: var(--feature-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.category-content {
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.category-icon {
  margin-bottom: 15px;
  color: #409eff;
}

.category-card h3 {
  margin: 0 0 15px 0;
  padding: 0;
  color: var(--text-color);
  font-size: 1.4em;
  font-weight: 600;
}

.category-description {
  margin: 0;
  padding: 0;
  color: var(--text-color);
  font-size: 0.95em;
  line-height: 1.5;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .home {
    padding: 20px 15px;
  }
  
  .features {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .feature {
    width: 90%;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
  }
  
  .category-content {
    padding: 15px 10px;
  }
  
  .category-card h3 {
    font-size: 1.2em;
  }
  
  .category-description {
    font-size: 0.85em;
  }
}
</style>